<template>
  <div>
    <div class="mask"></div>
    <div class="newSingle">
      <div class="overflow-y">
        <div class="vs_top">
          <p v-if="rowData.sequenceStatus === 4">结账</p>
          <p v-else>补单</p>
          <i class="el-icon-close" @click="hanldeCloseClick"></i>
        </div>
        <div class="vs_info pt-16">
          <!-- 左侧 -->
          <div class="left_info">
            <div class="left_item left_info_name">
              <div>{{ rowVIPData.name || '无' }}</div>
              <div>姓名</div>
            </div>
            <div class="left_item left_info_name">
              <div>{{ rowVIPData.consumeMoney || 0 }}</div>
              <div>历史销售额</div>
            </div>
            <div class="left_item left_info_name">
              <div>{{ rowVIPData.integralNumber || 0 }}</div>
              <div>积分</div>
            </div>
            <div class="left_item left_info_name">
              <div>{{ rowVIPData.balance || 0 }}</div>
              <div>账号余额</div>
            </div>
            <div class="left_item left_info_VIP">
              <div class="vip1" @click="hanldeViewVIP">查看VIP</div>
              <div class="vip2">全部VIP</div>
            </div>
          </div>
          <!-- 右侧 -->
          <div class="right_info">
            <div class="right_item right_info_name">
              <div>{{ preferential }}</div>
              <div>优惠</div>
            </div>
            <div class="right_item right_info_name">
              <div>{{ totalNumber }}</div>
              <div>数量</div>
            </div>
            <div class="right_item right_info_name">
              <div>{{ discounts }}</div>
              <div>折数</div>
            </div>
            <div class="right_item right_info_name">
              <div>{{ DropAmount }}</div>
              <div>吊牌金额</div>
            </div>
            <div class="right_item right_info_name">
              <div>{{ shouldAmount }}</div>
              <div>应收金额</div>
            </div>
          </div>
        </div>
        <div class="vs_choose pt-16">
          <div class="left_choose">
            <span class="mr-8">销售日期</span>
            <el-date-picker
              disabled
              class="picker_data mr-8"
              v-model="params.sellTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
            <span class="mr-8">VIP</span>
            <el-select disabled class="mr-8" v-model="params.vip" filterable>
              <el-option
                v-for="(item, _index) in vipList"
                :key="item.id"
                :label="item.phone"
                :value="_index"
              >
              </el-option>
            </el-select>
            <span class="mr-8">折数</span>
            <el-input
              class="update-input mr-8"
              v-model="params.discount"
              disabled
            ></el-input>
            <el-input
              class="update-input mr-8"
              v-model="clerkDataListName"
              disabled
            ></el-input>
            <el-button type="primary" disabled>营业员</el-button>
          </div>
          <div class="right_choose">
            营业序号：{{ rowData.vipSellSequence }}
          </div>
        </div>
        <div class="vs_table_input pt-16 mr-8">
          <el-table
            border
            :data="codeData"
            id="codeTable"
            style="width: 100%; margin-bottom: 20px"
            max-height="148px"
            :header-cell-style="{
              background: '#f4f4f4',
              padding: 0,
              height: '40px'
            }"
            :cell-style="{ padding: 0, height: '36px' }"
          >
            <el-table-column :label="barcodeValue"> </el-table-column>
            <el-table-column
              v-if="sizeList.length != 0"
              prop="colorName"
              label="颜色"
            >
            </el-table-column>
            <template v-for="col in sizeList">
              <!--    @blur="
                      handleClick($event, {
                        index: scope.$index,
                        key: col,
                        result: scope.row[col]
                      })
                    " -->
              <el-table-column
                :key="col + Math.random()"
                :prop="col"
                :label="col"
              >
                <template slot-scope="scope">
                  <el-input
                    size="small"
                    class="innerInp"
                    v-model.number="scope.row[col]"
                    @input="
                      hanldeInputSizeList($event, {
                        index: scope.$index,
                        key: col,
                        result: scope.row
                      })
                    "
                    @focus="
                      hanldeFocusSizeList($event, {
                        index: scope.$index,
                        key: col,
                        result: scope.row[col]
                      })
                    "
                    @blur="
                      hanldeBlurSizeList($event, {
                        index: scope.$index,
                        key: col,
                        result: scope.row
                      })
                    "
                  >
                  </el-input>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
        <div class="vs_input pt-16">
          <span class="mr-8">类型</span>
          <el-select
            class="mr-8"
            v-model="params.sequenceType"
            placeholder="请选择"
            disabled
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="mr-8">件单价</span>

          <el-input
            class="update-input mr-8"
            type="number"
            v-model="params.onePrice"
            :disabled="!Boolean(params.isPaidOnePrice)"
          >
            <template slot="prepend">
              <el-checkbox
                :disabled="onePriceCheckBoxState"
                v-model="params.isPaidOnePrice"
                @change="handleCheckboxStatus"
              ></el-checkbox>
            </template>
          </el-input>
          <el-input
            class="update-input mr-8"
            v-model.trim="params.typeNumber"
            placeholder="扫描/输入,输完按回车"
            @keyup.enter.native="barcodeEnter($event)"
            @input="onInputUpperCase"
            :disabled="barcodeInputState"
          ></el-input>
          <el-input
            :disabled="billInputState"
            class="update-input mr-8"
            v-model.trim="params.bill"
            placeholder="小票号输入框"
          ></el-input>
          <el-input
            :disabled="remarkInputState"
            class="update-input mr-8"
            v-model.trim="params.remark"
            placeholder="备注"
          ></el-input>
        </div>
        <div class="vs_editor_table pt-16">
          <el-table
            :data="tableData"
            style="width: 100%"
            highlight-current-row
            :header-cell-style="{
              background: '#f4f4f4',
              padding: 0,
              height: '40px'
            }"
            :cell-style="{ padding: 0, height: '26px' }"
            height="250"
          >
            <el-table-column prop="colorName" label="颜色"> </el-table-column>
            <el-table-column prop="size" label="尺寸编号"> </el-table-column>
            <el-table-column prop="number" label="数量">
              <!-- @blur="handleOnBlur(scope.row)" -->
              <template slot-scope="scope">
                <!-- sequenceType 单号的类型，为2的时候才可以输入负数 -->
                <!-- <template v-if="params.sequenceType !== 2"> -->
                <el-input
                  placeholder="可编辑"
                  :disabled="inputStatue"
                  v-model="scope.row.number"
                  @input="handleInputNumber(scope.row)"
                  @focus="hanldeFocus(scope.row.number)"
                  @blur="hanldeBlurNumber(scope.row)"
                ></el-input>
                <!-- </template> -->
                <!-- <template v-else>
                  <el-input
                    placeholder="可编辑"
                    :disabled="inputStatue"
                    v-model="scope.row.number"
                    @blur="handleOnBlur(scope.row)"
                  ></el-input>
                </template> -->
              </template>
            </el-table-column>
            <el-table-column prop="sellPrice" label="售价"> </el-table-column>
            <el-table-column prop="kindsNumber" label="款号"> </el-table-column>
            <el-table-column prop="discount" label="折数">
              <template slot-scope="scope">
                <!--   oninput="if(value<0)value=0" -->
                <el-input
                  placeholder="可编辑"
                  :disabled="inputStatue"
                  v-model="scope.row.discount"
                  @input="handleInputDiscount(scope.row)"
                  @focus="hanldeFocus(scope.row.discount)"
                  @blur="hanldeBlurDiscount(scope.row)"
                ></el-input>

                <!-- <template v-else>
                  <el-input
                    placeholder="可编辑"
                    :disabled="inputStatue"
                    v-model="scope.row.discount"
                    type="number"
                    @blur="handleOnBlur(scope.row)"
                  ></el-input>
                </template> -->
              </template>
            </el-table-column>
            <el-table-column prop="onePrice" label="单价">
              <template slot-scope="scope">
                <el-input
                  placeholder="可编辑"
                  :disabled="inputStatue"
                  v-model="scope.row.onePrice"
                  @input="handleInputOnePrice(scope.row)"
                  @focus="hanldeFocus(scope.row.onePrice)"
                  @blur="hanldeBlurOnePrice(scope.row)"
                ></el-input>

                <!-- <template v-else>
                  <el-input
                    placeholder="可编辑"
                    :disabled="inputStatue"
                    v-model="scope.row.onePrice"
                    type="number"
                    @blur="handleOnBlur(scope.row)"
                  ></el-input>
                </template> -->
              </template>
            </el-table-column>
            <el-table-column prop="money" label="金额"> </el-table-column>
            <el-table-column prop="preferential" label="优惠">
            </el-table-column>
            <el-table-column prop="commodityName" label="品名名称">
            </el-table-column>
            <el-table-column prop="brandedName" label="名牌名称">
            </el-table-column>
            <el-table-column prop="enteringTime" label="录入时间" width="200px">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="vs_btn_wrap">
        <el-button size="medium" @click="hanldeCloseClick">取消</el-button>
        <el-button
          size="medium"
          :disabled="invoicingBtnState"
          @click="handleInvoicingClick"
          >结账</el-button
        >
        <el-button
          size="medium"
          :disabled="continueBtnState"
          @click="hanldeSave"
          >确认</el-button
        >
        <el-button
          size="medium"
          type="primary"
          @click="handleContinueClick"
          :disabled="continueBtnState"
          >继续录入</el-button
        >
      </div>
    </div>

    <!-- 查看vip -->
    <checkVIP
      v-if="vipState"
      :rowVIPData="rowVIPData"
      @hanldeCloseVip="hanldeViewVIP"
    ></checkVIP>
    <!-- 结账 -->
    <invoicing
      v-if="invoicingState"
      :vipSellSequence="rowData.vipSellSequence"
      :rowData="rowData"
      :rowVIPData="rowVIPData"
      :shouldAmount="shouldAmount"
      @handleCloseInvoicing="handleCloseInvoicing"
      @handleConfirmClick="handleConfirmClick"
    ></invoicing>
  </div>
</template>

<script>
// 条码规律控制层
import { getBarCode } from '@/network/manufacturer'
import { getKindsNumberList } from '@/network/artNo'
import { query_vip_personnel as getPersonnel } from '@/request/store/store_baseInfo_request'
import {
  getVipList,
  getShopSale,
  keepPostShop,
  updateVipSell,
  saveAffirm,
  getVipIntegral,
  updateStatus,
  getPersonnelList,
  getCommissionList,
  getListBySequence
} from '@/request/store/K_storeSalesQuery'
import { getShop } from '@/network/shop'

import { changeDate, formatNewDate, deepClone } from '@/util/util'
import checkVIP from './checkVIP.vue'
import invoicing from './invoicing.vue'

export default {
  props: {
    rowData: {
      // 当前选择的左侧数据
      type: Object,
      require: true,
      default() {
        return {}
      }
    },
    rightDataList: {
      // 右侧的数据
      type: Array,
      require: true,
      default() {
        return []
      }
    },
    // 直营店编号
    rowNo: {
      type: String,
      default: () => '0'
    }
  },
  name: 'newSingle',
  data() {
    return {
      rowVIPData: {}, // 当前选择的vip信息
      numbering: 0, //
      // 请求体
      params: {
        accountType: 0,
        sellTime: '', // 销售日期
        vip: '', // 手机号码
        personnelList: [], // 营业员
        sequenceType: null, // 单号类型（1正常2退货3赠送）
        isPaidOnePrice: 0, // 是否是实收单价（0否1是）
        onePrice: null, // 实收单价
        typeNumber: '', // 型号
        bill: '', // 小票号
        remark: '', // 备注
        number: 0,
        directSaleNo: '', // 直营店编号
        kindsNumber: '', // 货号
        vipSellSequence: '',
        discount: 0
      },
      typeList: [
        // 类型
        {
          value: 1,
          label: '正常'
        },
        {
          value: 2,
          label: '退货'
        },
        {
          value: 3,
          label: '赠送'
        }
      ],
      personnelList: [], // 全部营业员
      proportion: [], // 营业比例
      sdNo: null, // 营业id
      manufacturerBarCode: [], // 条形码规则
      header: '',
      dateTime: '', // 销售日期
      vipList: [], // vip信息
      vipPhone: '',
      VIPName: '',
      value: '',
      tableData: [],
      tempTableData: [],
      barcodeValue: '', // 货号
      KindsNumberList: [], // 根据货号获取所有货号数组
      sizeList: [], // 尺码
      codeData: [],
      clerkDataList: [], // 选择的营业员数据
      clerkDataListName: '', // 显示选择的营业员
      tempClerkDataListName: '',
      vipSellSequence: '', // 销售序号
      shouldAmount: 0, // 应收金额
      vipState: false, // 查看vip
      clerkState: false, // 营业员
      invoicingState: false, // 结账
      continueBtnState: false, // 继续录入按钮
      continueBtnState: false, // 确认按钮
      invoicingBtnState: true, // 结账按钮
      onePriceCheckBoxState: false, // 件单价
      billInputState: false, // 小票号输入框
      remarkInputState: false, // 备注
      barcodeInputState: false, // 款号输入
      inputStatue: false // 输入框的状态
    }
  },
  components: {
    checkVIP,
    invoicing
  },
  created() {
    // this.getShop()
    // console.log(this.rowData)
    this.params.sellTime = this.rowData.sellTime
    this.params.vip = this.rowData.vip
    this.clerkDataListName = this.rowData.personnelNames
    this.params.directSaleNo = this.rowData.directSaleNo
    this.params.discount = this.rowData.discount
    this.params.sequenceType = this.rowData.sequenceType
    this.params.isPaidOnePrice = this.rowData.isPaidOnePrice
    this.params.bill = this.rowData.bill
    this.params.remark = this.rowData.remark
    this.tempTableData = deepClone(this.rightDataList)
    this.tableData = this.tempTableData
    this.numbering = this.rowNo

    // 根据 订单的状态显示不同的禁用状态
    this.continueBtnState = this.rowData.sequenceStatus === 4 // 继续录入按钮
    this.continueBtnState = this.rowData.sequenceStatus === 4 // 确认按钮
    // 赠送不能结账
    if (this.rowData.sequenceType !== 3) {
      this.invoicingBtnState = this.rowData.sequenceStatus === 4 ? false : true
    }
    this.barcodeInputState = this.rowData.sequenceStatus === 4 // 款号输入框
    this.onePriceCheckBoxState = this.rowData.sequenceStatus === 4 // 件单价状态
    this.billInputState = this.rowData.sequenceStatus === 4 // 件单价状态
    this.remarkInputState = this.rowData.sequenceStatus === 4 // 件单价状态
    this.inputStatue = this.rowData.sequenceStatus === 4 // table 输入框

    this.getVipList() // 获取vip
    this.getListBySequence()
    this.calculate()
  },
  computed: {
    // 优惠
    preferential() {
      return this.tableData.reduce((pre, item) => {
        return pre + item.preferential
      }, 0)
    },
    // 数量
    totalNumber() {
      return this.tableData.reduce((pre, item) => {
        return pre + item.number
      }, 0)
    },
    // 折数
    discounts() {
      const currentDiscount =
        this.tableData.reduce((pre, item) => {
          return Number(pre) + item.discount
        }, 0) / this.tableData.length
      return currentDiscount
    },

    // 吊牌金额
    DropAmount() {
      return this.tableData.reduce((pre, item) => {
        return pre + item.sellPrice * item.number
      }, 0)
    }
    // 应付金额
  },
  methods: {
    /**
     * -------------------------------- 新增 --------------------------------------
     */

    /**
     * table 数据
     */
    // table所有的输入框获取焦点的时候获取对应的数据并存储起来
    hanldeFocus(value) {
      let status = typeof value === 'number' && !isNaN(value)
      window.sessionStorage.setItem('focus', value)
    },
    // 数量输入框监听
    handleInputNumber(row) {
      let sequenceType = this.params.sequenceType
      let status =
        typeof row.number !== 'number' &&
        !isNaN(row.number) &&
        row.number != '' &&
        row.number != null
      if (sequenceType !== 2) {
        // 不是退货状态
        if (!status) {
          // return this.$message.info('请输入正确的数字')
        }
      } else {
        // console.log('退货')
      }
    },
    // 数量失去焦点
    hanldeBlurNumber(row) {
      let sequenceType = this.params.sequenceType
      let focuValue = window.sessionStorage.getItem('focus')
      let newNumber = Number(row.number)
      let status_1 =
        typeof newNumber === 'number' && !isNaN(newNumber) && newNumber > 0
      let status_2 =
        typeof newNumber === 'number' && !isNaN(newNumber) && newNumber < 0
      if (sequenceType !== 2) {
        if (!status_1) {
          row.number = focuValue
          this.$message.info('请输入正确的数字')
        } else {
          // row.number = focuValue
          // 判断是否改动
          if (focuValue != newNumber) {
            this.handleOnBlur(row)
          }
        }
      } else {
        // 退货
        if (!status_2) {
          row.number = focuValue
          this.$message.info('请输入负数')
        } else {
          if (newNumber == '0' || newNumber == '') {
            row.number = focuValue
          } else {
            if (focuValue != newNumber) {
              this.handleOnBlur(row)
            }
          }
        }
      }
      window.sessionStorage.removeItem('focus')
    },
    // 监听折数输入框监听
    handleInputDiscount(row) {
      let sequenceType = this.params.sequenceType
      let status =
        typeof row.number === 'number' &&
        !isNaN(row.number) &&
        row.number != '' &&
        row.number != null
    },
    // 折数失去焦点
    hanldeBlurDiscount(row) {
      let focuValue = window.sessionStorage.getItem('focus')
      let discount = Number(row.discount)
      let status = typeof discount === 'number' && !isNaN(discount)
      if (!status) {
        row.discount = focuValue
        this.$message.info('请输入正确的数字')
      } else {
        if (discount > 0 && discount <= 10) {
          if (focuValue != discount) {
            this.handleOnBlur(row)
          }
        } else {
          this.$message.info('折数 1 - 10 之间')
          row.discount = focuValue
        }
      }

      window.sessionStorage.removeItem('focus')
    },
    // 监听单价输入框监听
    handleInputOnePrice(row) {
      let onePrice = Number(row.onePrice)
      let status =
        typeof onePrice === 'number' && !isNaN(onePrice) && onePrice > 0
      if (!status) {
        // this.$message.info('请输入正确的数字')
      }
    },
    hanldeBlurOnePrice(row) {
      let focuValue = window.sessionStorage.getItem('focus')
      let onePrice = Number(row.onePrice)
      let status = typeof onePrice === 'number' && !isNaN(onePrice)
      if (!status) {
        console.log(status)
        row.onePrice = focuValue
      } else {
        if (onePrice >= 0) {
          if (focuValue != onePrice) {
            if (onePrice == '0' || onePrice == '') {
              row.onePrice = focuValue
            } else {
              this.handleOnBlur(row)
            }
            console.log(onePrice)
          } else {
            row.onePrice = focuValue
          }
        } else {
          row.onePrice = focuValue
        }
      }

      // if (focuValue != onePrice) {
      //   if (onePrice >= 0) {
      //     this.handleOnBlur(row)
      //   } else {
      //     row.onePrice = focuValue
      //   }
      // }
      window.sessionStorage.removeItem('focus')
    },

    /**
     * 颜色输入框 事件
     */
    hanldeFocusSizeList(event, { index, key, result }) {
      if (result) {
        window.sessionStorage.setItem('focusSize', result || '')
      }
    },
    hanldeInputSizeList(event, { index, key, result }) {
      let newResult = Number(result[key])
      let sequenceType = this.params.sequenceType
      let status = typeof newResult === 'number' && !isNaN(newResult)
      if (sequenceType != 2) {
        if (!status) {
          // return this.$message.info('请输入正确的数字')
        } else {
          // console.log('正确的数字')
        }
      } else {
        // console.log('退货')
      }
    },
    hanldeBlurSizeList(event, { index, key, result }) {
      let newResult = Number(result[key])
      let sequenceType = this.params.sequenceType
      let focusSize = window.sessionStorage.getItem('focusSize')
      let status_1 =
        typeof newResult === 'number' && !isNaN(newResult) && newResult > 0

      let status_2 = typeof newResult === 'number' && !isNaN(newResult)
      if (sequenceType !== 2) {
        // 不是退货
        if (!status_1) {
          // this.$message.info('请输入正确的数字')
          if (newResult == '0' || newResult == '') {
            result[key] = ''
          } else {
            result[key] = focusSize
          }
        }
      } else {
        // 退货才需要负数
        if (!status_2) {
          this.$message.info('请输入正确的数字')
          if (newResult == '0' || newResult == '') {
            result[key] = ''
          } else {
            result[key] = focusSize
          }
        }
      }
      // result[key] = focusSize
      window.sessionStorage.removeItem('focusSize')
    },
    handleCheckboxStatus(value) {
      this.params.isPaidOnePrice = value
    },
    // 继续录入 按钮
    handleContinueClick() {
      if (this.params.isPaidOnePrice) {
        if (!this.params.onePrice) {
          this.$message.info('请输入单价')
        } else {
          this._continue()
        }
      } else {
        this._continue()
      }
    },

    // 继续录入数据的私有方法
    async _continue() {
      let temp = JSON.stringify(this.codeData)
      if (temp === '[]') return this.$message.info('请输入数据')
      // if (!this.params.isPaidOnePrice) return this.$message.info('请输入单价')
      let codeData = JSON.parse(temp)
      this.params.sellTime = `${changeDate(formatNewDate())}`
      this.params.isPaidOnePrice
        ? (this.params.isPaidOnePrice = 1)
        : (this.params.isPaidOnePrice = 0)
      this.params.vipSellSequence = this.rowData.vipSellSequence
      this.params.sequenceType = this.params.sequenceType
      this.params.clerkDataListName = this.clerkDataListName
      // ? (this.params.isPaidOnePrice = 1)
      // : (this.params.isPaidOnePrice = 0)
      // this.params.onePrice = Number(this.params.onePrice)
      // this.params.onePrice = this.params.onePrice
      // this.params.discount = 10
      let tempArr = []
      let manufacturerBarCode = this.manufacturerBarCode
      if (codeData.length == 0) return
      // 动态的设置条码规则
      const newMapObj = {}
      codeData.map((item) => {
        for (const key in item) {
          if (key !== 'colorNo' && key !== 'colorName' && item[key] !== '') {
            // 有型色尺
            if (manufacturerBarCode.styleColorSize) {
              // 款号与尺码之间有 -
              if (manufacturerBarCode.styleColor) {
                // 尺码与色号之间有 -
                if (manufacturerBarCode.colorSize) {
                  newMapObj[`${this.header}-${key}-${item.colorNo}`] = Number(
                    item[key]
                  )
                } else {
                  // 尺码与色号之间没有 -
                  newMapObj[`${this.header}-${key}${item.colorNo}`] = Number(
                    item[key]
                  )
                }
              } else {
                // 款号与尺码之间没有 -
                if (manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  newMapObj[`${this.header}${key}-${item.colorNo}`] = Number(
                    item[key]
                  )
                } else {
                  // 色号与尺码之间没有 -
                  newMapObj[`${this.header}${key}${item.colorNo}`] = Number(
                    item[key]
                  )
                }
              }
            } else {
              // 没有型色尺
              if (manufacturerBarCode.styleColor) {
                // 款号与颜色之间有 -
                if (manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  newMapObj[`${this.header}-${item.colorNo}-${key}`] = Number(
                    item[key]
                  )
                } else {
                  // 色号与尺码之间没有 -
                  newMapObj[`${this.header}-${item.colorNo}${key}`] = Number(
                    item[key]
                  )
                }
              } else {
                // // 款号与颜色之间没有 -
                if (manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  newMapObj[`${this.header}${item.colorNo}-${key}`] = Number(
                    item[key]
                  )
                } else {
                  // 色号与尺码之间没有 -
                  newMapObj[`${this.header}${item.colorNo}${key}`] = Number(
                    item[key]
                  )
                }
              }
            }
          }
        }
      })
      for (const key in newMapObj) {
        this.params.kindsNumber = key
        this.params.number = newMapObj[key]
        const str = JSON.stringify(this.params)
        const obj = JSON.parse(str)
        tempArr.push(obj)
      }
      // console.log(tempArr)
      // return
      // let tempTableData = deepClone(this.tempTableData)
      const { data } = await keepPostShop(JSON.stringify(tempArr))
      if (data && data.code === 200) {
        this.tableData = []
        this.tableData.push(...data.data)
        this.$message.success(data.msg)

        // 计算 单价/金额
        this.calculate()
        // 清空
        this.codeData = []
        this.params.onePrice = ''
        this.params.typeNumber = ''
        this.params.bill = ''
        this.params.remark = ''
        // console.log(this.tableData, 'tableData')
        // console.log(tempTableData, 'tempTableData')
      }
    },
    // 计算 单价/金额
    calculate() {
      let shouldAmount = 0
      this.tableData.forEach((item, index) => {
        // 单价（售价*折数）/10
        // item.onePrice =
        //   Math.floor(item.sellPrice * (item.discount / 10) * 100) / 100
        // // 金额（单价*数量）
        // item.money = Math.floor(item.onePrice * item.number)
        // 应收金额
        shouldAmount += item.money
        this.shouldAmount = shouldAmount
      })
    },
    // 获取 款号显示中间表和尺码信息
    async barcodeEnter() {
      const _this = this
      const { data } = await getKindsNumberList({
        kindsNumberStr: this.params.typeNumber
      })

      data.data.data.sort((a, b) => {
        return a.relevanceSize.localeCompare(b.relevanceSize)
      })

      if (data && data.data && data.data.data[0] && data.code === 200) {
        this.KindsNumberList = data.data.data
        this.header = data.data.data[0].styleNumber
        let company = {
          company: data.data.data[0].brandedCompany
        }
        // 获取条码规律控制层
        this.getBarCode(company)
        // 设置 table 表头
        let tempData = JSON.parse(JSON.stringify(data.data.data))
        // if ([tempData[0].size]) return
        this.sizeList = [tempData[0].size]
        let isExistSize = 0
        for (const i of tempData) {
          for (const j of this.sizeList) {
            if (j == i.size) {
              isExistSize = 0
              break
            }
            isExistSize = 1
          }
          if (isExistSize) {
            this.sizeList.push(i.size)
          }
        }
        // 中间表
        let tmpCodeData = [
          { colorNo: tempData[0].colorNo, colorName: tempData[0].colorName }
        ]
        // console.log(tmpCodeData, 'tmpCodeData')
        let isExistColor = 0
        for (const i of tempData) {
          for (const j of tmpCodeData) {
            if (j.colorName == i.colorName) {
              isExistColor = 0
              break
            }
            isExistColor = 1
          }
          if (isExistColor) {
            tmpCodeData.push({
              colorNo: i.colorNo,
              colorName: i.colorName
            })
          }
        }
        tmpCodeData.forEach((e) => {
          this.sizeList.forEach((f) => {
            e[f] = ''
          })
        })
        this.codeData = tmpCodeData
      } else {
        this.$message.error('此货号/款号无数据')
      }
    },
    // 编辑 失去焦点时
    async handleOnBlur(row) {
      let sequenceType = this.params.sequenceType
      // let list = []
      row.number = Number(row.number)
      row.sequenceType = sequenceType
      row.sellTime = changeDate(row.sellTime)
      // row.sellTime = changeDate(formatNewDate())
      // list.push(row)
      // console.log(list, 'list')
      const { data } = await updateVipSell(JSON.stringify(row))
      if (data && data.data && data.code === 200) {
        // console.log(data.data)
        this.tableData = data.data
        this.$message.success(data.msg)
        window.sessionStorage.removeItem('focus')
        this.calculate()
        this.$emit('getDataList')
      } else {
        window.sessionStorage.removeItem('focus')
      }
    },
    // 确认
    async hanldeSave() {
      if (this.tableData.length) {
        const { data } = await saveAffirm({
          vipSellSequence: this.rowData.vipSellSequence
        })
        if (data && data.code === 200) {
          // 赠送不能结账
          if (this.rowData.sequenceType !== 3) {
            this.invoicingBtnState = false
          }
          this.continueBtnState = true
          this.inputStatue = true
          this.$message.success(data.msg)
        }
      }
    },
    // 条码规律控制层
    async getBarCode(requestData) {
      const { data } = await getBarCode(requestData)
      if (data && data.code === 200) {
        this.manufacturerBarCode = data.data && data.data[0]
      }
    },

    //  查询比例
    async getListBySequence() {
      const requestData = {
        vipSellSequence: this.rowData.vipSellSequence
      }
      const { data } = await getListBySequence(requestData)
      if (data && data.code === 200) {
        this.proportion = data.data
        this.getPersonnel()
      }
    },
    // 查询营业员
    async getPersonnel() {
      const requestData = {
        directSaleNo: this.params.directSaleNo
      }
      const { data } = await getPersonnel(requestData)
      if (data && data.code === 200) {
        // console.log(this.proportion)
        this.personnelList = data.data
        // this.personnelList 所有的营业员
        // this.proportion 根据当前的营业序号拿到当前的营业员
        this.proportion.forEach((item, index) => {
          this.personnelList.forEach((it, id) => {
            if (item.personnelName === it.personnelName) {
              it.commissionRate = item.commissionRate
              this.params.personnelList.push(it)
            }
          })
        })
      }
    },
    // 获取当前直营店编号和名称
    // async getShop() {
    //   const { data } = await getShop()
    //   if (data && data.code === 200) {
    //     this.params.directSaleNo = data.data.headquartersNo
    //     this.getPersonnel()
    //   }
    // },
    // 获取vip信息
    async getVipList() {
      const queryData = {
        directSaleNo: this.numbering,
        limit: 9999
      }
      const { data } = await getVipList(queryData)
      const vip = this.params.vip
      if (data && data.code === 200 && data.data) {
        this.vipList = data.data
        for (let i = 0; i < this.vipList.length; i++) {
          if (this.vipList[i].phone === vip) {
            this.rowVIPData = this.vipList[i]
            // console.log(this.rowVIPData)
            this.params.discount = this.rowVIPData.discount
          }
        }
      }
    },
    // 结账成功
    handleConfirmClick() {
      this.invoicingBtnState = true
    },
    // 关闭结账页面
    handleInvoicingClick() {
      // console.log(this.rowData.vipSellSequence)
      // console.log(this.rowData)
      // console.log(this.shouldAmount)
      this.invoicingState = true
    },
    // 关闭结账
    handleCloseInvoicing() {
      this.invoicingState = !this.invoicingState
    },
    //  result 输入内容
    handleClick(e, { index, key, result }) {
      e.target.parentNode.parentNode.parentNode.classList.remove('activeCell')
      this.codeData[index][key] = result
    },
    // 查看vip
    hanldeViewVIP() {
      this.vipState = !this.vipState
    },
    // 转成 大写
    onInputUpperCase(val) {
      this.params.typeNumber = val.toUpperCase()
    },
    // 关闭补单
    hanldeCloseClick() {
      this.$emit('hanldeCloseClick')
    }
    /**
     * -------------------------------- 结束 --------------------------------------
     */
    // 按下回车键
    // barcodeEnter() {
    //   this.getKindsNumberList(this.params.typeNumber)
    // },
    // // 获取 款号显示中间表和尺码信息
    // async getKindsNumberList(typeNumber) {
    //   const _this = this
    //   const { data } = await getKindsNumberList({
    //     kindsNumberStr: typeNumber
    //   })
    //   if (data && data.code === 200) {
    //     this.KindsNumberList = data.data.data
    //     // 设置 table 表头
    //     let tempData = JSON.parse(JSON.stringify(data.data.data))
    //     // if ([tempData[0].size]) return
    //     this.sizeList = [tempData[0].size]
    //     let isExistSize = 0
    //     for (const i of tempData) {
    //       for (const j of this.sizeList) {
    //         if (j == i.size) {
    //           isExistSize = 0
    //           break
    //         }
    //         isExistSize = 1
    //       }
    //       if (isExistSize) {
    //         this.sizeList.push(i.size)
    //       }
    //     }

    //     // 中间表
    //     let tmpCodeData = [
    //       { colorNo: tempData[0].colorNo, colorName: tempData[0].colorName }
    //     ]
    //     // console.log(tmpCodeData, 'tmpCodeData')
    //     let isExistColor = 0
    //     for (const i of tempData) {
    //       for (const j of tmpCodeData) {
    //         if (j.colorName == i.colorName) {
    //           isExistColor = 0
    //           break
    //         }
    //         isExistColor = 1
    //       }
    //       if (isExistColor) {
    //         tmpCodeData.push({
    //           colorNo: i.colorNo,
    //           colorName: i.colorName
    //         })
    //       }
    //     }
    //     tmpCodeData.forEach((e) => {
    //       this.sizeList.forEach((f) => {
    //         e[f] = ''
    //       })
    //     })
    //     this.codeData = tmpCodeData
    //   } else {
    //     this.$message.error('此货号/款号无数据')
    //   }
    // },
    // 继续录入按钮
    // async handleContinueClick() {
    // if (!this.params.sellTime) return this.$message.error('你选择销售日期')
    // if (!this.params.vip) return this.$message.error('请选择VIP')
    // if (!this.clerkDataList.length) return this.$message.error('请选择营业员')
    // if (this.params.sequenceType == null)
    //   return this.$message.error('请选择类型')
    // if (this.params.onePrice <= 0)
    //   return this.$message.error('请正确填写单价')
    // if (!this.params.typeNumber) return this.$message.error('请输入货号')
    // // if (!this.params.typeNumber) return this.$message.error('请输入货号')
    // this.params.personnelList = this.clerkDataList
    // this.params.sellTime = this.params.sellTime
    // this.params.isPaidOnePrice
    //   ? (this.params.isPaidOnePrice = 1)
    //   : (this.params.isPaidOnePrice = 0)
    // this.params.onePrice = Number(this.params.onePrice)
    // let tempArr = []
    // let codeData = JSON.parse(JSON.stringify(this.codeData))
    // codeData.forEach((item, index) => {
    //   Object.keys(item).forEach((key, id) => {
    //     if (key !== 'colorNo' && key !== 'colorName' && item[key]) {
    //       // 货号
    //       this.params.kindsNumber =
    //         this.params.typeNumber + '-' + item.colorNo + key
    //       this.params.number = Number(item[key])
    //       let params = JSON.parse(JSON.stringify(this.params))
    //       tempArr.push(params)
    //     }
    //   })
    // })
    // // console.log(tempArr, '继续录入请球体')
    // const { data } = await keepPostShop(JSON.stringify(tempArr))
    // if (data && data.code === 200) {
    //   this.tableData = data.data
    //   this.vipSellSequence = data.data && data.data[0].vipSellSequence
    //   this.$message.success(data.msg)
    // }
    // this.handleCloseInvoicing()
    // },
    // 失去焦点触发 updateVipSell
    // async handleOnBlur(row) {
    // // 2021-11-07T16:00:00.000Z
    // console.log(row)
    // let list = []
    // row.number = Number(row.number)
    // row.sellTime = changeDate(row.sellTime)
    // this.vipSellSequence = row.vipSellSequence
    // list.push(row)
    // const { data } = await updateVipSell(JSON.stringify(list))
    // if (data && data.code === 200) {
    //   this.$message.success(data.msg)
    // } else {
    //   this.$message.error(data.msg)
    // }
    // },
    // 确认
    // async hanldeSave() {
    // if (this.tableData.length) {
    //   const { data } = await saveAffirm({
    //     vipSellSequence: this.vipSellSequence
    //   })
    //   if (data && data.code === 200) {
    //     this.invoicingBtnState = false
    //     this.continueBtnState = true
    //     this.inputStatue = true
    //     this.$message.success(data.msg)
    //   }
    // }
    // },

    // 获取积分
    // async getVipIntegral() {
    // const { data } = await getVipIntegral()
    // console.log(data)
    // }
    // 接收营业员的数据
    // handleChooseClerkData(data) {
    // this.clerkDataList = data
    // for (let i = 0; i < this.clerkDataList.length; i++) {
    //   this.tempClerkDataListName += this.clerkDataList[i].personnelName + ','
    //   let temp = this.tempClerkDataListName.substr(
    //     0,
    //     this.tempClerkDataListName.length - 1
    //   )
    //   this.clerkDataListName = temp
    // }
    // }
    // onInputUpperCase(val) {
    //   // this.params.typeNumber = val.toUpperCase()
    // },
    // VIP 选择
    // hanldeChangeVIP(index) {
    // if (index == '') return
    // this.rowVIPData = this.vipList[index]
    // this.params.vip = this.rowVIPData.phone
    // console.log(this.params, 'VIP 选择')
    // }
    // 查看vip
    // hanldeCloseVip() {
    // let rowVIPDataState = JSON.stringify(this.rowVIPData)
    // if (rowVIPDataState == '{}') return this.$message.error('请先选择VIP')
    // this.vipState = !this.vipState
    // console.log(this.rowVIPData)
    // },
    // 营业员
    // hanldeClerkClick() {
    // this.clerkState = !this.clerkState
    // if (this.clerkState) {
    //   this.clerkDataListName = ''
    //   this.clerkDataList = []
    // }
    // }
  }
}
</script>

<style lang="less" scoped>
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}

.newSingle {
  position: fixed;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-height: 800px;
  z-index: 99;
  background-color: white;
  overflow: auto;
  .overflow-y {
    max-height: 700px;
    overflow-y: scroll;
    .vs_top {
      height: 40px;
      background-color: #f8f8f8;
      margin-bottom: 10px;
      p {
        float: left;
        line-height: 40px;
        padding-left: 20px;
        font-weight: 700;
      }
      i {
        float: right;
        line-height: 40px;
        padding: 0 16px;
      }
    }
    .vs_info {
      display: flex;
      justify-content: space-between;
      margin-left: 16px;
      margin-right: 16px;
      .left_info {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin: 5px 0;
        width: 48%;
        height: 80px;
        border-radius: 5px;
        color: #fff;
        background-color: #4988fc;
        .left_item {
          text-align: center;
        }
        .left_info_VIP {
          cursor: pointer;
          .vip1 {
            padding: 2px 5px;
            border-radius: 5px;
            // font-size: 14px;
            background-color: #7eabfc;
          }
          .vip2 {
            padding: 2px 5px;
            border-radius: 5px;
            // font-size: 14px;
            margin-top: 5px;
            background-color: #7eabfc;
          }
        }
      }
      .right_info {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin: 5px 0;
        width: 48%;
        height: 80px;
        border-radius: 5px;
        color: #fff;
        background-color: #4988fc;
        .right_item {
          text-align: center;
        }
      }
    }

    .vs_choose {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 16px;
      /deep/.el-select {
        .el-input {
          .el-input__inner {
            height: 32px;
          }
          .el-select__caret {
            line-height: 27px;
          }
        }
      }
      .left_choose {
        .el-date-editor {
          height: 32px;
          /deep/.el-input__inner {
            height: 32px;
          }
          /deep/.el-input__icon {
            line-height: 35px;
          }
        }
      }
    }
    .vs_table_input {
      margin: 0 16px;
    }
    .vs_input {
      margin: 0 16px;
      /deep/.el-select {
        .el-input {
          .el-input__inner {
            height: 32px;
          }
          .el-select__caret {
            line-height: 27px;
          }
        }
      }
      /deep/.el-checkbox {
        width: 20px;
        height: 20px;
        .el-checkbox__input {
          line-height: 20px;
        }
      }
    }
  }

  .vs_editor_table {
    margin: 0 16px;
  }
  .vs_btn_wrap {
    max-height: 100px;
    height: 100px;
    float: right;
    padding: 15px;
    width: 100%;
    text-align: right;
  }
}
</style>
